<template>
  <div id="userCenter-myInfo">
    <el-container>
      <el-header style="height: 10px">
        <!--头像-->
        <el-col :span="12" style="width: 150px">
          <div class="demo-basic--circle" style="margin-top: 15px">
            <div class="block">
              <el-avatar :size="100" :src="iconUrl+this.personalInformation.icon"></el-avatar>
            </div>
          </div>
          <el-button size="small" type="primary" @click="dialogIconVisible=true">点击上传头像</el-button>
<!--          <div slot="tip" class="el-upload__tip">支持jpg/png文件,且不超过2MB</div>-->
        </el-col>
        <table style="margin-top: 20px;line-height: 40px">
          <tr>
            <td>
              <span style="font-weight: bolder;">昵 称: </span>
            </td>
            <td>
              <span style="color: #909399">{{ this.personalInformation.nickName }}</span>
            </td>
          </tr>
          <tr>
            <td>
              <span style="font-weight: bolder">简 介: </span>
            </td>
            <td>
              <span style="color: #909399">{{ this.personalInformation.introduction }}</span>
            </td>
          </tr>
        </table>
      </el-header>
      <!--用户名-->
      <el-main style="margin-top: 140px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="">我的信息</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="editMyInfo">编 辑</el-button>
          </div>
          <!--          info:['昵 称','账 号','注册时间','状 态','性 别','简 介','邮 箱','积 分','年龄'],-->
          <table class="myInfoTable">
            <tr>
              <td>昵 称:</td>
              <td>{{ this.personalInformation.nickName }}</td>
            </tr>
            <tr>
              <td>账 号:</td>
              <td>{{ this.personalInformation.username }}</td>
            </tr>
            <tr>
              <td>注册时间:</td>
              <td>{{ this.personalInformation.registerTime }}</td>
            </tr>
            <tr>
              <td>状 态:</td>
              <td>{{ this.personalInformation.violation == 1 ? "无" : "封禁" }}</td>
            </tr>
            <tr>
              <td>性 别:</td>
              <td>{{ this.personalInformation.sex }}</td>
            </tr>
            <tr>
              <td>简 介:</td>
              <td>{{ this.personalInformation.introduction }}</td>
            </tr>
            <tr>
              <td>邮 箱:</td>
              <td>{{ this.personalInformation.email }}</td>
            </tr>
            <tr>
              <td>积 分:</td>
              <td>{{ this.personalInformation.score }}</td>
            </tr>
            <tr>
              <td>年 龄:</td>
              <td>{{ this.personalInformation.age }}</td>
            </tr>
          </table>
        </el-card>
      </el-main>
    </el-container>
    <!--编辑模态窗口-->
    <el-dialog title="" :visible.sync="dialogFormVisible"
               style="width: 1200px;margin: 0 auto;">
      <p style="width: 90px;height: 10px;margin-left: -10px;margin-top: -30px;">编辑个人资料</p>
      <hr style="margin-top:35px;margin-left: -10px">
      <div style="">
        <el-form :model="form" status-icon :rules="editRules" ref="form" class="demo-ruleForm">
          <el-form-item label="昵称" :label-width="formLabelWidth" prop="nickName">
            <el-input v-model="form.nickName" autocomplete="off" style="width: 380px;height: 20px"></el-input>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
            <el-input v-model="form.sex" autocomplete="off" style="width: 380px;height: 20px" disabled></el-input>
          </el-form-item>
          <el-form-item label="简介" :label-width="formLabelWidth">
            <el-input v-model="form.introduction" autocomplete="off" style="width: 380px;height: 20px"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
            <el-input v-model="form.email" autocomplete="off" style="width: 380px;height: 20px"></el-input>
          </el-form-item>
          <el-form-item label="年龄" :label-width="formLabelWidth">
            <el-input v-model="form.age" autocomplete="off" style="width: 380px;height: 20px"></el-input>
          </el-form-item>

        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editMyInfoSure('form')">确 定</el-button>
      </div>
    </el-dialog>
    <!--修改头像模态窗口-->
    <el-dialog title="修改头像" :visible.sync="dialogIconVisible" style="width:700px;margin: 0 auto">
      <el-form status-icon :rules="uploadIconRules" ref="formLabelAlign" class="demo-ruleForm">
      <el-upload
          class="avatar-uploader"
          :auto-upload="false"
          action="#"
          :multiple="false"
          :limit="1"
          list-type="picture-card"
          :on-change="changeicon"
          :on-remove="removeicon">
        <i class="el-icon-plus"></i>
      </el-upload>
      </el-form>
        <el-button type="primary" @click="iconUpload" style="width: 100px;margin-top:10px;margin-left: 100px">上 传</el-button>

    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "UserCenter-myInfo",
  data() {
    //昵称验证
    const validNickName = (rule, value, callback) => {
      //const reg = /^[a-zA-Z0-9]+$/
      if (value === '') {
        callback(new Error('请输入用户名'))
      }
      /*else if (!reg.test(value)) {
        callback(new Error('用户名必须是由6-18位英文(含大小写)+数字组成'))
      } */
      else {
        callback()
      }
    };
    //简介验证
    const validIntroduction = (rule, value, callback) => {
      /*const reg = /^[a-zA-Z0-9]+$/

      if (!reg.test(value)) {
        callback(new Error('用户名必须是由6-18位英文(含大小写)+数字组成'))
      }
      else {
        callback()
      }*/
    };
    //邮箱验证
    const validEmail = (rule, value, callback) => {
      const reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
      if (!reg.test(value)) {
        callback(new Error('输入正确邮箱格式'))
      } else {
        callback()
      }
    };
    //年龄验证
    const validAge = (rule, value, callback) => {
      /*const reg = /^120$ | ^[ 1 - 9 ]$ | ^((1[0-1])|[1-9]) \d$/
      if (!reg.test(value)) {
        callback(new Error('年龄格式不对'))
      }
      else {
        callback()
      }*/
    };
    //上传的头像验证
    const validUploadIcon=(rule, value, callback) => {

    };
    return {
      iconUrl:this.$IconUrl,
      fileData: {token: localStorage.getItem("token")},
      imageUrl: '',
      files:{file:''}, //上传头像用
      file:'',
      personalInformation: { //个人资料
        age: '',
        email: '',
        id: '',
        introduction: '',
        registerTime: '',
        score: '',
        sex: '',
        username: '',
        violation: '',
        nickName: '',
        icon: ''
      },
      info: ['昵 称', '账 号', '注册时间', '状 态', '性 别', '简 介', '邮 箱', '积 分', '年龄'],
      form: { //编辑个人资料的表单
        nickName: '',
        sex: '',
        introduction: '',
        email: '',
        age: '',
      },
      dialogFormVisible: false, //修改个人信息弹窗控制在
      dialogIconVisible: false, //修改头像弹窗控制
      formLabelWidth: '80px',
      successMes: '',
      //编辑验证
      editRules: {
        nickName: [
          {required: true, validator: validNickName, trigger: 'blur'}
        ],
        /* sex: [
           { required:true, validator: validSex, trigger: 'blur' }
         ],*/
        introduction: [
          {required: true, validator: validIntroduction, trigger: 'blur'}
        ],
        email: [
          {required: true, validator: validEmail, trigger: 'blur'}
        ],
        age: [
          {required: true, validator: validAge, trigger: 'blur'}
        ],
      },
      //上传头像验证
      uploadIconRules: {
        uploadIcon: [
          {required: true, validator: validUploadIcon, trigger: 'blur'}
        ]
      }
    }

  },
  methods: {
    //选择图片后触发的
    changeicon(file) {
      console.dir(file)
      this.files.file = file.raw
    },
    //删除图片触发的
    removeicon() {
      this.files.file = null

    },
    //上传头像
    iconUpload () {

      const isJPG = this.files.file.type === 'image/jpeg';
      const isLt2M = this.files.file.size / 1024 / 1024 < 2;
      if(this.files.file.length==0) {
        this.$message.error('请选择图片');
        return

      }else if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
        return
      }else if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }else { //上传头像成功
         const formData = new FormData()
       for(const key in this.files) {
         formData.append(key,this.files[key])
       }
      //发起上传头像请求
       this.$myAxios('/userCenter/uploadIcon','post',formData,resp=>{
         this.dialogIconVisible=false
         this.personalInformation.icon=resp.data
         //刷新页面
         location.reload()
       })
      }
    },

    //获取个人资料
    getMyInfo() {
      this.$myAxios('/userCenter/getMyInfoJ', 'post', null, resp => {
        this.personalInformation = resp.data.data;
        console.log(resp)
      })
    },
    //编辑个人资料按钮
    editMyInfo() {
      this.dialogFormVisible = true;
      this.form.nickName = this.personalInformation.nickName;
      this.form.sex = this.personalInformation.sex;
      this.form.introduction = this.personalInformation.introduction;
      this.form.age = this.personalInformation.age;
      this.form.email = this.personalInformation.email;
    },
    //编辑资料确认按钮
    editMyInfoSure(formName) {
      //先进行验证表单的合法性不能为空等
      /*if(){

      }*/
      this.$refs[formName].validate((valid) => {
        if (valid) { //表单验证通过情况
          this.$myAxios('/userCenter/editUserInfoJ', 'post', this.form, resp => {
            console.log(resp);
            //关闭修改模态窗口
            this.dialogFormVisible = false;
            //再次执行获取我的资料实现刷新效果
            this.getMyInfo();
            //信息提示
            this.$message({
              message: resp.data.message,
              type: 'success'
            });
          })
        } else { //表单验证没通过情况
          console.log('error submit!!');
          return false;
        }
      });

    }
  },
  created() {
    this.getMyInfo()
  }
}
</script>

<style scoped>
.myInfoTable {
  line-height: 41px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>